<template>
  <div class="container">
    <!-- 数据概览卡片 -->
    <a-row :gutter="16" style="margin-bottom: 16px;">
      <a-col :span="6" v-for="(card, index) in dataCards" :key="index">
        <div class="data-card">
          <div class="card-content">
            <div class="card-title">{{ card.title }}</div>
            <div class="card-value">{{ card.value }}</div>
            <div class="card-compare" v-if="card.compare">
              <span :class="{'up': card.trend > 0, 'down': card.trend < 0}">
                {{ card.trend > 0 ? '+' : '' }}{{ card.trend }}%
              </span>
              <span class="compare-text">较上周</span>
            </div>
          </div>
          <div class="card-icon" :style="{ backgroundColor: `${card.color}1a`, color: card.color }">
            <component :is="getIcon(card.icon)" :style="{ fontSize: '28px' }" />
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- 快捷功能入口和待办任务 -->
    <a-row :gutter="16">
      <!-- 左侧区域 -->
      <a-col :span="16">
        <!-- 快捷功能 -->
        <div class="general-card function-card" style="margin-bottom: 16px;">
          <div class="card-header">
            <div class="card-title">快捷入口</div>
          </div>
          <div class="function-grid">
            <div 
              class="function-item" 
              v-for="(func, index) in quickFunctions" 
              :key="index"
              @click="handleQuickFunction(func)"
            >
              <div class="function-icon" :style="{ backgroundColor: func.bgColor }">
                <component :is="getIcon(func.icon)" :style="{ fontSize: '20px', color: '#fff' }" />
              </div>
              <div class="function-name">{{ func.name }}</div>
            </div>
          </div>
        </div>

        <!-- 操作记录 -->
        <div class="general-card record-list">
          <div class="card-header">
            <div class="card-title">最近操作记录</div>
            <a-button type="text" size="small" @click="loadMoreRecords">查看更多</a-button>
          </div>
          <div class="record-grid">
            <div v-for="(record, index) in operationRecords" :key="index" class="record-card">
              <div class="record-header">
                <a-tag :color="record.tagColor">{{ record.type }}</a-tag>
                <span class="record-time">{{ record.time }}</span>
              </div>
              <div class="record-content">{{ record.content }}</div>
              <div class="record-info">
                <span class="record-ref">单号: {{ record.refId }}</span>
                <span class="record-operator">操作人: {{ record.operator }}</span>
              </div>
              <div class="record-actions">
                <a-button type="text" size="small">查看</a-button>
                <a-button type="text" size="small">详情</a-button>
              </div>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 右侧区域 -->
      <a-col :span="8">
        <div class="general-card todo-card">
          <div class="card-header">
            <div class="card-title">待办任务</div>
            <a-button type="text" size="small" @click="markAllAsRead">全部标记为已读</a-button>
          </div>
          <div class="task-list">
            <div v-for="(task, index) in todoTasks" :key="index" class="task-item">
              <div class="task-left">
                <a-tag :color="task.tagColor">{{ task.type }}</a-tag>
                <div class="task-content">{{ task.content }}</div>
              </div>
              <div class="task-right">
                <span class="task-time">{{ task.time }}</span>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'Workbench'
}
</script>

<script setup>
import { ref, markRaw, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { 
  IconStorage, 
  IconImport, 
  IconExport, 
  IconCalendar,
  IconSearch,
  IconPlus,
  IconEdit,
  IconUserGroup,
  IconSettings,
  IconFile,
  IconNotification,
  IconThumbUp
} from '@arco-design/web-vue/es/icon'
import { useInboundStore } from '@/stores/inbound'
import { useOutboundStore } from '@/stores/outbound'

// 获取stores
const inboundStore = useInboundStore()
const outboundStore = useOutboundStore()
const router = useRouter()

// 活跃的图表类型
const activeChart = ref('inout')

// 顶部数据卡片
const dataCards = ref([
  {
    title: '库存总量',
    value: '0',
    icon: 'IconStorage',
    color: '#165DFF',
    trend: 0,
    compare: true
  },
  {
    title: '今日入库',
    value: '0',
    icon: 'IconImport',
    color: '#37C2FF',
    trend: 0,
    compare: true
  },
  {
    title: '今日出库',
    value: '0',
    icon: 'IconExport',
    color: '#00B42A',
    trend: 0,
    compare: true
  },
  {
    title: '待处理任务',
    value: '0',
    icon: 'IconCalendar',
    color: '#F7BA1E'
  }
])

// 快捷功能
const quickFunctions = ref([
  {
    name: '入库申请',
    icon: 'IconImport',
    path: '/inbound/orders',
    bgColor: '#165DFF'
  },
  {
    name: '出库申请',
    icon: 'IconExport',
    path: '/outbound/orders',
    bgColor: '#0FC6C2'
  },
  {
    name: '库存查询',
    icon: 'IconSearch',
    path: '/inventory/query',
    bgColor: '#722ED1'
  },
  {
    name: '货物管理',
    icon: 'IconPlus',
    path: '/basic-settings/cargo-info',
    bgColor: '#F77234'
  },
  {
    name: '盘点任务',
    icon: 'IconCalendar',
    path: '/inventory/count',
    bgColor: '#0FC6C2'
  },
  {
    name: '客户管理',
    icon: 'IconUserGroup',
    path: '/basic-settings/customer-profile',
    bgColor: '#165DFF'
  },
  {
    name: '供应商管理',
    icon: 'IconSettings',
    path: '/basic-settings/supplier-profile',
    bgColor: '#F7BA1E'
  },
  {
    name: '系统设置',
    icon: 'IconSettings',
    path: '/about/system-info',
    bgColor: '#722ED1'
  }
])

// 待办任务
const todoTasks = ref([
  {
    type: '待入库',
    content: '冷冻牛肉批次待验收：INB2025050001',
    time: '10分钟前',
    tagColor: 'blue'
  },
  {
    type: '待出库',
    content: '冷冻海鲜产品出库申请：OUT2025050002',
    time: '30分钟前',
    tagColor: 'green'
  },
  {
    type: '库存预警',
    content: '冷冻鸡翅库存不足，当前库存：35kg',
    time: '1小时前',
    tagColor: 'red'
  },
  {
    type: '温度预警',
    content: '肉类库区域A-01-01温度异常：-15℃（标准：-18℃）',
    time: '2小时前',
    tagColor: 'orange'
  },
  {
    type: '系统提醒',
    content: '速冻食品供应商合同将于5月底到期',
    time: '1天前',
    tagColor: 'purple'
  }
])

// 操作记录数据
const operationRecords = ref([
  {
    type: '入库',
    tagColor: 'blue',
    content: '完成冷冻猪肉产品入库',
    refId: 'INB2025050001',
    operator: '张冷藏',
    time: '2025-05-01 10:23:45'
  },
  {
    type: '出库',
    tagColor: 'green',
    content: '冷冻水产品批次出库完成',
    refId: 'OUT2025050002',
    operator: '李冻库',
    time: '2025-05-01 09:45:30'
  },
  {
    type: '盘点',
    tagColor: 'orange',
    content: '冷链冻品库区A区域盘点完成',
    refId: 'CNT2025050003',
    operator: '王制冷',
    time: '2025-05-01 08:30:15'
  }
])

// 页面加载时初始化数据
onMounted(async () => {
  await loadDashboardData()
})

// 加载仪表盘数据
const loadDashboardData = async () => {
  try {
    // 获取入库统计数据
    const inboundStats = await inboundStore.getInboundStatistics()
    
    // 获取出库统计数据
    const outboundStats = await outboundStore.getOutboundStatistics()
    
    // 更新数据卡片
    if (inboundStats && outboundStats) {
      dataCards.value = [
        {
          title: '库存总量',
          value: inboundStats.totalOrders?.toString() || '0',
          icon: 'IconStorage',
          color: '#165DFF',
          trend: 12.5,
          compare: true
        },
        {
          title: '今日入库',
          value: inboundStats.completedToday?.toString() || '0',
          icon: 'IconImport',
          color: '#37C2FF',
          trend: 23.5,
          compare: true
        },
        {
          title: '今日出库',
          value: outboundStats.shippedToday?.toString() || '0',
          icon: 'IconExport',
          color: '#00B42A',
          trend: -8.2,
          compare: true
        },
        {
          title: '待处理任务',
          value: (
            (inboundStats.pendingReceipt || 0) + 
            (inboundStats.pendingPutaway || 0) + 
            (outboundStats.pendingPicking || 0) + 
            (outboundStats.pendingShipping || 0)
          ).toString(),
          icon: 'IconCalendar',
          color: '#F7BA1E'
        }
      ]
      
      // 更新待办任务内容
      if (inboundStats.pendingReceipt > 0) {
        todoTasks.value[0].content = `有 ${inboundStats.pendingReceipt} 批冷冻产品待验收入库`
      }
      
      if (outboundStats.pendingPicking > 0) {
        todoTasks.value[1].content = `有 ${outboundStats.pendingPicking} 份冷链产品出库单待拣货`
      }
    }
    
  } catch (error) {
    console.error('加载仪表盘数据失败:', error)
    Message.error('加载仪表盘数据失败，请稍后重试')
  }
}

// 处理快捷功能点击
const handleQuickFunction = (func) => {
  console.log('Navigate to:', func.path)
  router.push(func.path)
}

// 标记全部任务为已读
const markAllAsRead = () => {
  Message.success('已将全部任务标记为已读')
}

// 加载更多记录
const loadMoreRecords = () => {
  router.push('/about/system-log')
}

// 获取图标组件
const getIcon = (icon) => {
  switch (icon) {
    case 'IconStorage':
      return IconStorage
    case 'IconImport':
      return IconImport
    case 'IconExport':
      return IconExport
    case 'IconCalendar':
      return IconCalendar
    case 'IconSearch':
      return IconSearch
    case 'IconPlus':
      return IconPlus
    case 'IconEdit':
      return IconEdit
    case 'IconUserGroup':
      return IconUserGroup
    case 'IconSettings':
      return IconSettings
    case 'IconFile':
      return IconFile
    case 'IconNotification':
      return IconNotification
    case 'IconThumbUp':
      return IconThumbUp
    default:
      return IconStorage
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/variables.less';

// 数据卡片样式
.data-card {
  background-color: var(--color-bg-2);
  height: 108px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: @border-radius-base;
  box-shadow: @box-shadow-base;

  .card-content {
    flex: 1;
  }

  .card-title {
    font-size: 13px;
    color: var(--color-text-3);
    margin-bottom: 8px;
  }

  .card-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 8px;
    line-height: 1.2;
  }

  .card-compare {
    font-size: 12px;
    
    .up {
      color: #f53f3f;
    }
    
    .down {
      color: #00b42a;
    }
    
    .compare-text {
      color: var(--color-text-3);
      margin-left: 4px;
    }
  }

  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
  }
}

.card-header {
  height: 52px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);

  .card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-1);
  }
}

// 功能卡片样式
.function-card {
  .function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
    
    .function-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 0;
      cursor: pointer;
      transition: background-color 0.2s;
      border-radius: 4px;

      &:hover {
        background-color: var(--color-fill-1);
      }

      .function-icon {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
      }

      .function-name {
        font-size: 13px;
        color: var(--color-text-1);
      }
    }
  }
}

// 待办任务卡片样式
.todo-card {
  height: 100%;

  .task-list {
    padding: 16px;
    
    .task-item {
      padding: 16px;
      border-radius: 4px;
      background-color: var(--color-fill-1);
      margin-bottom: 16px;
      
      &:last-child {
        margin-bottom: 0;
      }

      .task-left {
        margin-bottom: 8px;
        
        .task-content {
          margin-top: 8px;
          color: var(--color-text-1);
          font-size: 13px;
          line-height: 1.5;
        }
      }

      .task-right {
        .task-time {
          font-size: 12px;
          color: var(--color-text-3);
        }
      }
    }
  }
}

// 记录列表样式
.record-list {
  .record-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;

    .record-card {
      padding: 16px;
      background-color: var(--color-fill-1);
      border-radius: 4px;
      display: flex;
      flex-direction: column;

      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        
        .record-time {
          font-size: 12px;
          color: var(--color-text-3);
        }
      }
      
      .record-content {
        font-size: 13px;
        color: var(--color-text-1);
        margin-bottom: 12px;
        line-height: 1.5;
      }
      
      .record-info {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: var(--color-text-2);
        margin-bottom: 12px;
      }
      
      .record-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--color-border);
      }
    }
  }
}
</style> 